<template>
  <div class="form-definition-editor-component-list">
    <a-row>
      <a-col :data-component="fieldComponent.comp" data-role="icon" class="field-component-icon" :span="12" v-for="fieldComponent in FieldComponentIcons">
        <component :is="fieldComponent"/>
      </a-col>
    </a-row>

    <a-divider>布局组件</a-divider>
    <a-row>
      <a-col :data-component="comp.comp" data-role="icon-layout" class="field-component-icon" :span="12" v-for="comp in LayoutComponentIcons">
        <component :is="comp"/>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import {FieldComponentIcons, LayoutComponentIcons} from "@/components/form/FieldRegistry";

export default {
  name: 'FormDefinitionComponentList',
  data() {
    return {
      FieldComponentIcons,
      LayoutComponentIcons
    }
  },
  methods: {
  }
};
</script>
<style>
.form-definition-editor-component-list {
  width: 250px;
  border-right: 1px solid #c4c4c4;
  height: 100%;
  overflow: auto;
  padding: 5px;
}
.field-component-icon {
  display: flex;
  align-content: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #c4c4c4;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  height: 50px;
}
</style>